<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">	
		<title></title>
		<script src="主页demo/js/jquery-3.6.0.min.js"></script>
		<link rel="stylesheet"  href="css/base.css"/>
		<style>
			#col1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="col1">
			
		</div>
		
		
		
		
		
		<script>
			$(function(){
				
				$(window).mousemove(function(e){
				var	w_w=$(window).width();//页面宽度
				// console.log(w_w)
				var	w_h=$(window).height();
				var x=e.pageX;//鼠标当前位置位置页面左上角顶点x轴的距离
				// console.log(e.pageX)
				var y=e.pageY;
				var mx=(x-w_w)/1000; //除以一个较大的比例使得图片相对于鼠标移动的幅度要小一些
				console.log(mx)
				var my=(y-w_h)/w_h;//当然也可以直接除以屏幕高度,除任何数都可以数值越大,图片相对于鼠标移动的幅度要越小
				col1.style.MozTransform=col1.style.webkitTransform=col1.style.msTransform=col1.transform="translate3d("+-mx*30+"px,"+-my*30+"px,0)";
				// col2.style.MozTransform=col2.style.webkitTransform=col2.style.msTransform=col3.transform="translate3d("+-mx*20+"px,"+-my*20+"px,0)";
				// col3.style.MozTransform=col3.style.webkitTransform=col3.style.msTransform=col3.transform="translate3d("+-mx*40+"px,"+-my*40+"px,0)";
				// hongju.style.MozTransform=hongju.style.webkitTransform=hongju.style.msTransform=hongju.transform="translate3d("+-mx*10+"px,"+-my*10+"px,0)";
				});
			})
		</script>
	</body>
</html>
